<template>
  <div class="area-modal">
    <el-dialog width="30%" v-model="dialogVisible" :before-close="handleClose">
      <template #header>
        <div class="my-header">
          <div>比选方案</div>
        </div>
      </template>
      <div class="scheme-box">
        <div class="table-box">
          <el-table
            :data="state.tableData"
            highlight-current-row
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="scName" label="方案名称" show-overflow-tooltip />
            <el-table-column prop="creatorName" label="创建人" show-overflow-tooltip />
            <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip />
          </el-table>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSave">计算</el-button>
          <el-button @click="handleClose()">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineExpose } from 'vue'
import { renderTime } from '@/utils/index'
//接口
import { getRiverScheme } from '@/services/modules/compute-methods'
onMounted(() => {})
const emit = defineEmits(['handleSelectedScheme'])
const dialogVisible = ref(false)
const addForm = reactive({})
const state = reactive({
  zid: '',
  tableData: [],
  selectedArray: [],
  bscids: '',
  schemeId: ''
})
const tableData = [
  {
    name: '北望023',
    user: '张三',
    date: '2022-10-1'
  },
  {
    name: '北望024',
    user: '李四',
    date: '2022-10-1'
  }
]
//保存
function handleSave() {
  let arr = []
  state.selectedArray.forEach((item) => {
    if (item.id != state.schemeId) {
      arr.push(item.id)
    }
  })
  state.bscids = arr.join(',')
  emit('handleSelectedScheme', state.bscids)
  dialogVisible.value = false
}
//根据区域获取方案列表
function schemeList() {
  return new Promise((resolve, reject) => {
    getRiverScheme({ rsid: state.zid }).then((res) => {
      if (res.code === 200) {
        state.tableData = res.data
        state.tableData = state.tableData.map((item) => {
          return (item = { ...item, createTime: renderTime(item.createTime) })
        })
        state.tableData = state.tableData.filter((item, index) => {
          return item.id != state.schemeId
        })

        resolve(state.tableData)
      }
    })
  })
}
function handleOpenModal(value) {
  dialogVisible.value = true
  state.zid = value.zId
  state.schemeId = value.schemeId
  schemeList()
}
defineExpose({ handleOpenModal })
function handleClose() {
  dialogVisible.value = false
}
function handleSelectionChange(item) {
  state.selectedArray = item
}
</script>

<style lang="less" scoped>
.area-modal {
  .my-header {
    height: 35px;
    border-bottom: 2px solid #eee;
  }
  .table-box {
    height: calc(100% - 50px);
    box-sizing: border-box;
    padding: 0px;
    :deep(.el-table) {
      height: 100%;
    }
  }
}
</style>
